<template>
    <div>
        <div class="box">
            <el-form>
                <el-row :gutter="20">

                    <el-col :span="3">
                        <el-form-item label="仓库">
                            <div style="margin-right:5px">
                                <GoodsWarehouseSelect ref="warehouseSelect" @select="warehouseSelectSelect" />
                            </div>

                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="商品">
                            <el-input size="large" clearable placeholder="商品名称、货号、条形编码"
                                v-model="requestParam.data.goodsSynthesis"
                                @keyup.enter.native="getBodyData()"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="操作时间">
                            <el-date-picker v-model="requestParam.data.gmtOperateStart" type="datetime"
                                placeholder="开始时间" style="width: 40%;" value-format="x"
                                @change="getBodyData()" />
                            <div style="text-align: center; margin:0 10px 0 10px;">至</div>
                            <el-date-picker v-model="requestParam.data.gmtOperateEnd" type="datetime"
                                placeholder="结束时间" style="width: 40%;" value-format="x"
                                @change="getBodyData()" />
                        </el-form-item>
                    </el-col>


                    <!-- 查询 -->
                    <el-col :span="6">
                        <el-form-item>
                            <el-button size="large" type="primary" @click.prevent="getBodyData()">查询</el-button>
                        </el-form-item>
                    </el-col>


                </el-row>

            </el-form>

        </div>

        <div class="box">

            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>仓库流水</span>
                    </div>
                </template>
                <el-table ref="table" @selection-change="selectionChange" :reserve-selection="true" v-loading="loading"
                    element-loading-text="Loading..." :data="bodyData.content" style="width: 100%" row-key="id"
                    max-height="500px">

                    <el-table-column prop="warehouse.name" label="仓库名称" />
                    <el-table-column prop="goods.name" label="商品名称" />
                    
                    <!-- 展示图 -->
                    <el-table-column prop="fileIdOfImgArr" label="展示图" width="120">
                        <template #default="{ row }">
                            <el-image
                            v-if="row.goods != null && row.goods.fileIdOfImgArr != null && row.goods.fileIdOfImgArr.length > 0"
                            style="width: 100px; height: 100px" :src="$kt.file.visit(row.goods.fileIdOfImgArr[0])"
                            fit="contain" :preview-src-list="$kt.file.getPreviewSrcList(row.goods.fileIdOfImgArr)"
                            :preview-teleported="true"></el-image>
                            <div v-else>无</div>
                            
                        </template>
                    </el-table-column>
                    
                    <el-table-column prop="business" label="业务类型">
                        <template #default="{ row }">
                            <div v-if="row.business != null">
                                {{ row.business.name }}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="businessCode" label="业务编码" />

                    <!-- 原库存 -->
                    <el-table-column prop="stockOld" label="原库存" width="120">
                        <template #default="{ row }">
                            <div v-if="row.stockOld != null">
                                {{ row.stockOld }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 库存变化 -->
                    <el-table-column prop="stockChange" label="库存变化" width="120">
                        <template #default="{ row }">
                            <div v-if="row.stockChange != null"
                            style="font-weight: bold;"
                            >
                                <span v-if="row.stockChange > 0" style="color: red;">{{"+"}}{{ row.stockChange }}</span>
                                <span v-else-if="row.stockChange == 0">{{ row.stockChange }}</span>
                                <span v-else-if="row.stockChange < 0" style="color: green;">{{ row.stockChange }}</span>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 新库存 -->
                    <el-table-column prop="stockNew" label="新库存" width="120">
                        <template #default="{ row }">
                            <div v-if="row.stockNew != null">
                                {{ row.stockNew }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 业务单号 -->
                    <el-table-column prop="businessOrder" label="业务单号" width="200">
                        <template #default="{ row }">
                            <div v-if="row.businessOrder != null"
                            style="font-weight: bold;"
                            >
                                {{ row.businessOrder }}
                            </div>
                        </template>
                    </el-table-column>


                    <!-- 备注 -->
                    <el-table-column prop="remark" label="备注" width="200">
                        <template #default="{ row }">
                            <div v-if="row.remark != null">
                                {{ row.remark }}
                            </div>
                        </template>
                    </el-table-column>

                    

                    <el-table-column prop="gmtModified" label="操作时间" width="180">
                        <template #default="{ row }">
                            {{ $kt.date.format(row.gmtOperate, 'yyyy-MM-dd hh:mm:ss') }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="goods.numberStr" label="商品货号" />

                    
                    <!-- 分类 -->
                    <el-table-column prop="goods.type" label="商品分类" width="180">
                        <template #default="{ row }">
                            <div v-if="row.goods != null && row.goods.type != null && row.goods.type.name != null">
                                {{ goodsJs.getGoodsTypeFullName(row.goods.type) }}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 单价 -->
                    <el-table-column prop="goods.price" label="商品单价" width="120">
                        <template #default="{ row }">
                            <div v-if="row.goods != null && row.goods.price != null">
                                {{ "￥" }}{{ row.goods.price }}
                            </div>
                        </template>
                    </el-table-column>


                    <!-- 条形码 -->
                    <el-table-column prop="barCode" label="商品条形编码" width="200">
                        <template #default="{ row }">
                            <div v-if="row.goods != null && row.goods.barCode != null && row.goods.barCode != ''"
                                @click="openBarCode(row.goods)" style="text-align: center;">
                                <div>
                                    {{ row.goods.barCode }}
                                </div>
                                <div style="font-size: 10px;">
                                    (点击查看条形码)
                                </div>
                            </div>
                        </template>
                    </el-table-column>


                </el-table>
                <div style="position:relative;
                height: 30px;
                ">
                    <el-pagination @current-change="pageChange" style="
                    position:absolute;
                    left:50%;
                    top:10px;
                    transform:translateX(-50%);
                    " layout="prev, pager, next" :page-size="requestParam.pageSize"
                        :current-page="requestParam.pageNumber" :total="bodyData.totalElements" />
                </div>
            </el-card>
        </div>

        <BarDialog ref="barDialog" />


    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import $kt from '@/vueKantboot';
import { ElMessage, ElMessageBox } from 'element-plus';
import BarDialog from '@/components/barDialog/barDialog.vue';
import goodsJs from '@/commonJs/goods/index.js';
import GoodsWarehouseSelect from '@/components/goodsWarehouseSelect/goodsWarehouseSelect.vue';
import { da } from 'element-plus/es/locale';

let barDialog = ref();
let warehouseSelect = ref();

let warehouseList = ref([]);


let requestParam = ref({
    data: {
        "warehouseIds": [],
        "goodsSynthesis":"",
        // 时间戳
        gmtOperateStart: null,
        // 时间戳
        gmtOperateEnd: null,
    },
    pageNumber: 1,
    pageSize: 30,
});


let openBarCode = (row: any) => {
    if (row.barCode == null || row.barCode == '') {
        ElMessage({
            message: '条形码为空',
            type: 'error',
        });
        return false;
    }
    barDialog.value.open(row);
}

let dialogOfSave = ref();

let table = ref();

let toSave = (param: any) => {
    dialogOfSave.value.open(param);
}


let isTop = ref(true);

let warehouseSelectSelect = (val: any) => {
    requestParam.value.data.warehouseIds = val;
    getBodyData();
}

let bodyData = ref({
    "content": [
    {
                "business": {
                    "code": "check",
                    "gmtCreate": null,
                    "gmtModified": null,
                    "id": 1,
                    "name": "盘点"
                },
                "businessCode": "check",
                "businessOrder": null,
                "gmtCreate": 1698891636579,
                "gmtModified": 1698891636579,
                "gmtOperate": 1698891636575,
                "goods": {
                    "barCode": null,
                    "brandId": null,
                    "children": [],
                    "code": null,
                    "descriptionJson": null,
                    "fileIdOfImgArrStr": null,
                    "gmtCreate": 1698821086621,
                    "gmtModified": 1698821086621,
                    "id": 477940470317061,
                    "minOrder": null,
                    "name": "测试1.1",
                    "numberStr": null,
                    "parent": {
                        "barCode": "1111",
                        "brandId": null,
                        "children": null,
                        "code": null,
                        "descriptionJson": null,
                        "fileIdOfImgArrStr": "[]",
                        "gmtCreate": null,
                        "gmtModified": 1698821041969,
                        "id": 2,
                        "minOrder": null,
                        "name": "测试3",
                        "numberStr": "1111",
                        "parent": null,
                        "parentId": null,
                        "price": null,
                        "priority": null,
                        "purchasePrice": null,
                        "retailPrice": null,
                        "selectList": [],
                        "stockWarningLower": null,
                        "stockWarningUpper": null,
                        "type": null,
                        "typeId": null,
                        "unitId": null,
                        "wholesalePrice": null
                    },
                    "parentId": 2,
                    "price": null,
                    "priority": null,
                    "purchasePrice": null,
                    "retailPrice": null,
                    "selectList": [],
                    "stockWarningLower": null,
                    "stockWarningUpper": null,
                    "type": null,
                    "typeId": null,
                    "unitId": null,
                    "wholesalePrice": null
                },
                "goodsId": 477940470317061,
                "id": 478229442957317,
                "remark": null,
                "stockChange": 777,
                "stockNew": 999,
                "stockOld": 222,
                "warehouse": {
                    "empIdOfManager": null,
                    "empOfManager": null,
                    "gmtCreate": 1698739908505,
                    "gmtModified": 1698739908505,
                    "id": 477607964741637,
                    "name": "3号仓库",
                    "remark": null,
                    "store": null,
                    "storeId": null
                },
                "warehouseId": 477607964741637
            },
    ],
    "number": 1,
    "size": 100,
    "totalElements": 2,
    "totalPage": 1
});

let selection = ref([]);

let selectionChange = (val: any) => {
    selection.value = val;
}


let toEdit = (param: any) => {
    dialogOfSave.value.open(param);
}


let pageChange = (val: any) => {
    requestParam.value.pageNumber = val;
    getBodyData();
}

let toAddChildren = (param: any) => {
    dialogOfSave.value.open({
        id: "",
        name: "",
        parentId: param.id,
        fileIdOfImg: "",
    });
}


let loading = ref(true);

let getBodyData = () => {

    loading.value = true;

    $kt.request.request({
        url: '/business-goods-web/admin/goodsWarehouseDetail/getBodyData',
        method: 'post',
        data: requestParam.value,
    }).then((res) => {
        if (res.data.success) {
            bodyData.value = res.data.data;
            // fileIdOfImgArr
            for (let i = 0; i < bodyData.value.content.length; i++) {
                let item = bodyData.value.content[i];
                if (item.goods == null) {
                    continue;
                }
                item.goods.fileIdOfImgArr = [];
                if (item.goods.fileIdOfImgArrStr != null && item.goods.fileIdOfImgArrStr.length > 0) {
                    item.goods.fileIdOfImgArr = JSON.parse(item.goods.fileIdOfImgArrStr);
                }
            }

            console.log(bodyData.value);
        }
        loading.value = false;
    });
}

getBodyData();




let removeBatch = () => {



    $kt.request.request({
        url: '/business-goods-web/admin/goodsWarehouseDetail/removeBatch',
        method: 'post',
        data: selection.value,
    }).then((res) => {
        if (res.data.success) {
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            getBodyData();
            return false;
        }
        ElMessage({
            message: res.data.errMsg,
            type: 'error',
        });
    });

}


let toRemoveBatch = () => {
    if (selection.value.length == 0) {
        ElMessage({
            message: '请选择要删除的数据',
            type: 'error',
        });
        return false;
    }

    // 询问是否删除
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // 删除
        removeBatch();
    }).catch(() => {
        // 取消
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    });
}

</script>

<style lang="scss" scoped>
.box {
    padding: 20px 20px 0 20px;
}

.box-box {
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 30px;
    border-radius: 5px;
}


.box-box:hover {
    // 变小
    transform: scale(0.95);
}

.box-box:active {
    // 变小
    transform: scale(0.9);
}
</style>